<template>
  <div class="h-full w-full" :class="themeStore.isDark?'dark':''">
    <RouterView />
  </div>

  <Transition :css="false" @enter="enterHandler" @leave="leaveHandler">
    <div v-if="loadingStore.isLoading" class="fixed inset-0 z-50 bg-white">
      <Loading />
    </div>
  </Transition>
</template>

<script setup>
import Loading from './components/Loading.vue'
import { useLoadingStore ,systemStatus} from './ts/pinia'
import gsap from 'gsap'

const loadingStore = useLoadingStore()
const themeStore = systemStatus()
const animationConfig = {
  duration: 0.55,
  ease: {
    enter: 'power2.out',
    leave: 'power2.in'
  }
}

const enterHandler = (el, done) => {
  gsap.fromTo(el,
    { y: '100%' },
    {
      y: '0%',
      duration: animationConfig.duration,
      ease: animationConfig.ease.enter,
      onComplete: done
    }
  )
}

const leaveHandler = (el, done) => {
  const performExit = () => {
    gsap.to(el, {
      y: '100%',
      duration: animationConfig.duration,
      ease: animationConfig.ease.leave,
      onComplete: done
    })
  }

  // 直接检查当前是否有动画正在运行
  if (gsap.isTweening(el)) {

    const check = () => {
      !gsap.isTweening(el) ? performExit() : requestAnimationFrame(check)
    }
    requestAnimationFrame(check)
  } else {
    performExit()
  }
}

</script>